<script lang="ts" setup>
import { imagePath, maskStyle } from '@/libs/file-utils'
import { list, sign } from './data'
import { isLogin, userInfo } from '@/libs/user'

const icon_back = imagePath('icon-back.svg')
const icon_sign = imagePath('main/user/icon-sign.png')
const img_login = imagePath('main/user/login.png')
const img_wallet_bg = imagePath('main/user/wallet-bg.png')
const img_avatar = imagePath('user/info/avatar.png')

const go = (url: string) => uni.navigateTo({ url })
const toRecharge = () => go('/pages/pay/recharge/index')
</script>

<template>
  <template v-if="isLogin">
    <div class="user-bar">
      <div
        class="avatar"
        :style="{ backgroundImage: img_avatar }"
      ></div>
      <div class="right">
        <div class="nickname">{{ userInfo?.nickname }}</div>

        <div
          v-if="userInfo?.vipStatus === 1"
          class="vip"
        >
          <div class="level">VIP</div>
          <!-- <div
            class="icon"
            :style="{ backgroundImage: icon_vip }"
          ></div> -->

          <div
            class="sign"
            :class="{ deactive: userInfo?.signin }"
            @click="sign"
          >
            <div
              class="img"
              :style="{ backgroundImage: icon_sign }"
            ></div>
            签到

            <div
              v-if="!userInfo?.signin"
              class="new"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="wallet"
      :style="{ backgroundImage: img_wallet_bg }"
      @click="toRecharge"
    >
      <div class="title">我的蒜包</div>
      <div class="count"><span class="val">{{ userInfo?.balance }}</span>蒜瓣</div>
      <div class="recharge">
        去充值
        <div
          class="arrow"
          :style="maskStyle(icon_back)"
        ></div>
      </div>
    </div>
  </template>
  <div
    v-else
    class="login"
    :style="{ backgroundImage: img_login }"
  ></div>

  <div
    v-for="(item, index) in list"
    :key="index"
    class="item"
    @click="go(item.url)"
  >
    <div
      class="icon"
      :style="{ backgroundImage: item.icon }"
    ></div>
    {{ item.name }}
    <div
      class="arrow"
      :style="maskStyle(icon_back)"
    ></div>
  </div>
</template>

<style lang="less" scoped>
.user-bar {
  width: 100%;

  margin: 10rpx 0;

  display: flex;

  .avatar {
    width: 180rpx;
    height: 210rpx;

    margin-left: 32rpx;
  }

  .right {
    position: relative;
    flex: 1;

    margin-top: 30rpx;
    margin-left: 34rpx;

    .nickname {
      color: #230012;
      font-size: 72rpx;
      line-height: 88rpx;
    }

    .vip {
      margin-top: 4rpx;

      display: flex;
      align-items: center;

      .level {
        padding: 14rpx 18rpx;

        border-radius: 12rpx;
        background-color: #FFB8D7;

        color: #fff;
        font-size: 32rpx;
        line-height: 40rpx;
        text-shadow: 0 0 4rpx #FF9AC6, 0 0 4rpx #FF9AC6, 0 0 4rpx #FF9AC6;
      }

      // .icon {
      //   width: 60rpx;
      //   height: 50rpx;

      //   margin-left: 12rpx;
      // }

      .sign {
        position: relative;
        margin-left: 20rpx;

        padding: 4rpx 18rpx 2rpx 14rpx;

        display: flex;
        align-items: center;

        border-radius: 24rpx;
        background-color: #FF9AE9;

        color: #fff;
        font-size: 32rpx;
        line-height: 40rpx;

        &.deactive {
          filter: grayscale(100%);
        }

        .img {
          width: 36rpx;
          height: 36rpx;

          margin-right: 2rpx;
        }

        .new {
          position: absolute;
          top: -4rpx;
          right: 12rpx;

          width: 10rpx;
          height: 10rpx;

          border-radius: 50%;
          background-color: #FF0303;
        }
      }
    }
  }
}

.wallet {
  position: relative;
  width: 702rpx;
  height: 232rpx;

  margin: 0 auto;

  box-sizing: border-box;
  padding-top: 32rpx;
  padding-left: 38rpx;

  color: #400030;

  .title {
    font-size: 40rpx;
    line-height: 40rpx;
  }

  .count {
    margin-top: 50rpx;

    color: rgba(64, 0, 48, .7);
    font-size: 40rpx;
    line-height: 40rpx;

    .val {
      color: #400030;
      font-size: 80rpx;
    }
  }

  .recharge {
    position: absolute;
    top: 32rpx;
    right: 30rpx;

    display: flex;
    align-items: center;

    font-size: 32rpx;

    .arrow {
      width: 44rpx;
      height: 44rpx;

      transform: rotateZ(180deg);

      background-color: #400030;
      mask-size: 100% 100%;
    }
  }
}

.login {
  width: 700rpx;
  height: 286rpx;

  margin: 0 auto 26rpx;
}

.item {
  position: relative;
  width: 686rpx;
  height: 132rpx;

  margin: 0 auto 8rpx;

  box-sizing: border-box;
  padding: 0 32rpx;

  border-radius: 32rpx;

  background-color: #FBF0FF;
  box-shadow:
    0 4rpx 20rpx 0 rgba(59, 3, 112, .13),
    0 -4rpx 4rpx 0 rgba(118, 0, 179, 0.30) inset,
    0 4rpx 4rpx 0 #F8EAFF inset;

  display: flex;
  align-items: center;

  color: #400030;
  font-size: 40rpx;

  .icon {
    width: 64rpx;
    height: 64rpx;

    margin-right: 24rpx;
  }

  .arrow {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%)rotateZ(180deg);

    width: 56rpx;
    height: 56rpx;

    background-color: #400030;
    mask-size: 100% 100%;
  }
}
</style>
